<template>
  <div style="height: 100%; width: 100%" ref="container">
    <div id="break" style="z-index: 10000" :style="{ width: width+'px', height: height+'px' }"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "WarnForPdf",
  props: {
    width: {
      type: Number,
      default: 790,
    },
    height: {
      type: Number,
      default: 300,
    },
    data1: {
      type: Array, // 定义prop的类型为数组
      default: () => []
    }
  },
  mounted() {
    this.initChart();
    this.getData();
    window.addEventListener("resize", this.handleResizeEnd);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResizeEnd);
  },
  data() {
    return {
      data: [],
      DTs: [],
      chartInstance: null,
      echart: echarts,
      fireCounts: [],
      breakCounts: [],
      legendFontSize: 12, // 初始图例文字大小
      resizeTimer: null // 定时器
    }
  },

  methods: {
    initChart() {
      this.chartInstance = this.echart.init(document.getElementById("break"));
    },
    async getData() {
      await this.updateData();
    },
    updateData() {
      const option = {
        xAxis: {
          axisLabel: {
            interval: 0,//X轴信息全部展示
            rotate: 60,//60 标签倾斜的角度
          },
          data: this.data1.map(item => item.dt),
        },
        yAxis: {
          type: 'value',
          minInterval: 1,
        },
        series: [
          {
            name: '故障',
            type: 'bar',
            data: this.data1.map(item => item.breakCount),
          }
        ],
        tooltip: {
          axisPointer: {
            type: "line", // 指示器类型（'line' 直线指示器；'shadow' 阴影指示器；'none' 无指示器；'cross' 十字准星指示器。）
            snap: false, // 坐标轴指示器是否自动吸附到点上。默认自动判断。
          },
          showContent: true, // 是否显示提示框浮层，默认显示
          triggerOn: "mousemove", // 提示框触发的条件（'mousemove'，鼠标移动时触发；'click'，鼠标点击时触发；'mousemove|click'，同时鼠标移动和点击时触发；'none'，不在 'mousemove' 或 'click' 时触发）
          confine: true, // 是否将 tooltip 框限制在图表的区域内
          backgroundColor: "#ffffff", // 提示框浮层的背景颜色
          padding: 15, // 提示框浮层内边距，单位px
          position: "top",
          textStyle: {
            color: "#000000", // 文字的颜色
            fontStyle: "normal", // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体）
            fontWeight: "normal", // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
          },

        },
      };
      this.chartInstance.setOption(option, true);
      this.handleResizeEnd()
    },
    handleResizeEnd() {
      clearTimeout(this.resizeTimer);
      this.resizeTimer = setTimeout(() => {
        this.chartInstance.resize();
        this.legendFontSize = Math.max(Math.floor(this.chartInstance.getWidth() / 100), 5);
        this.initChart(); // 重新渲染 echarts 图表
      }, 1000); // 设置延迟时间，1000ms
    },
  }
};
</script>

<style scoped>
</style>
